var OrderTemplate = function () {
  var template = /* html */ `
    <div class="order-template" :style="pageSize" v-loading.fullscreen.lock="loading">
      <div class="order-template-line" v-if="isLine"></div>
      <div class="order-template-content" ref="content" :key="'order_'+config.pageSize.pageText+'-'+config.pageSize.pageDirection">
        <div class="order-template-title">
          <span v-if="isPrint">{{config.pageTitle}}</span>
          <el-input v-else size="medium" v-model="config.pageTitle" style="width:100%" placeholder="请输入生产订单抬头">
          </el-input>
        </div>

        <order-info-setting class="order-template-item" :config="config" :data="productOrderData" @setting-config="toOpenDialog" style="z-index:2">
        </order-info-setting>

        <material-color-setting ref="materialColorSetting" v-if="config.showConfig.materialColorBom" class="order-template-item" :config="config"
          :data="productOrderData" @setting-config="toOpenDialog" style="z-index:3">
        </material-color-setting>

        <material-setting ref="materialSetting" v-if="config.showConfig.materialBom" class="order-template-item" :config="config" :data="productOrderData"
          @setting-config="toOpenDialog" style="z-index:4">
        </material-setting>

        <drag-table-setting ref="dragSetting" v-if="config.showConfig.projectImg||config.showConfig.otherTable" class="order-template-item" :config="config"
          :data="productOrderData" style="z-index:5"></drag-table-setting>
      </div>

      <el-dialog fullscreen append-to-body class="dialog-fullscreen" :title="dialogTitle" :visible.sync="openDialog" @closed="dialogClosed">
        <div style="height:100%;overflow:auto">
          <template v-if="openDialog">
            <order-info-setting-dialog v-if="dialogType==='orderInfo'" :config="config" @setting-success="orderInfoSettingSuccess">
            </order-info-setting-dialog>
            <material-color-setting-dialog v-else-if="dialogType==='materialColor'" :config="config" @setting-success="materialColorSettingSuccess">
            </material-color-setting-dialog>
            <material-setting-dialog v-else-if="dialogType==='material'" :config="config" @setting-success="materialSettingSuccess">
            </material-setting-dialog>
          </template>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      data: Object,
      isPrint: {
        type: Boolean,
        default: false
      },
      isLine:{
        type: Boolean,
        default: true
      },
      isEmphasize:{
        type: Boolean,
        default: false
      }
    },

    provide: function () {
      return {
        templProp: this.$props
      }
    },

    computed: {
      pageSize: function () {
        var config = this.config;
        return config.getPageSize();
      }
    },

    data: function () {
      var data = this.data;
      var productOrderData;
      if (data === undefined) {
        productOrderData = new ProduceOrderData(this.config);
      } else {
        productOrderData = data;
      }
      return {
        loading: false,
        productOrderData: productOrderData,
        openDialog: false,
        dialogTitle: '',
        dialogType: '',
        dialogData: null
      };
    },

    methods: {
      toOpenDialog: function (data) {
        var dialogData = data.dialogData;
        if (dialogData === undefined) {
          dialogData = null;
        }

        this.dialogTitle = data.dialogTitle;
        this.dialogType = data.dialogType;
        this.dialogData = dialogData;
        this.openDialog = true;
      },

      dialogClosed: function () {
        this.dialogTitle = '';
        this.dialogType = '';
        this.dialogData = null;
      },

      orderInfoSettingSuccess: function () {
        this.openDialog = false;
      },

      materialColorSettingSuccess: function () {
        this.openDialog = false;
      },

      materialSettingSuccess: function () {
        this.openDialog = false;
      },

      checkValid: function () {
        var mode = this.productOrderData.mode;
        if (mode !== 'test') {
          var $content = $(this.$refs['content']);
          var $el = $(this.$el);
          var contentHeight = $content.height();
          var totalHeight = $el.height();
          if (contentHeight > totalHeight) {
            this.$alert('生产订单内容已经超出纸张大小');
            return false;
          }
        }

        var compl = ['materialColorSetting', 'materialSetting', 'dragSetting'];
        var vmComplObj = this.$refs;
        for (var i = 0; i < compl.length; i++) {
          var complName = compl[i];
          var vmCompl = vmComplObj[complName];
          if (vmCompl === undefined) {
            continue;
          }

          var flag = vmCompl.checkValid();
          if (!flag) {
            return false;
          }
        }

        return true;
      },

      getConfigPostData: function () {
        var config = this.config;
        var postData = config.getObject(this.productOrderData);
        return postData;
      }
    },

    components: {
      OrderInfoSetting: OrderInfoSetting,
      OrderInfoSettingDialog: OrderInfoSettingDialog,
      MaterialColorSetting: MaterialColorSetting,
      MaterialColorSettingDialog: MaterialColorSettingDialog,
      MaterialSetting: MaterialSetting,
      MaterialSettingDialog: MaterialSettingDialog,
      DragTableSetting: DragTableSetting
    },

    template: template
  };
}();
